<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>创美商城--支付页</title>
		<link rel="icon" href="/assets/img/favicon.ico">


		<link rel="stylesheet" type="text/css" href="css/webbase.css" />
		<link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
	</head>

	<body>
		<div id="payVm">
			<!--页面顶部白条条，由js动态加载-->
			<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>

			<div class="top"></div>
			<script type="text/javascript">
				$(".top").load("shortcut.html");
			</script>

			<div class="cart py-container">
				<!--logoArea-->
				<div class="logoArea">
					<div class="fl logo"><span class="title">收银台</span></div>
				</div>
				<!--主内容-->

				<a href="payfail.html">支付失败演示页</a>
				<a href="paysuccess.html">支付成功演示页</a>


				<div class="checkout py-container  pay">
					<div class="checkout-tit">
						<h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">订单提交成功，请您及时付款！订单号：56789065645</span></h4>
						<span class="fr"><em class="sui-lead">应付金额：</em><em class="orange money">￥17,654</em>元</span>
						<div class="clearfix"></div>
					</div>
					<div class="checkout-steps">
						<div class="fl weixin">微信支付</div>
						<div class="fl sao">
							<p class="red">二维码已过期，刷新页面重新获取二维码。</p>
							<div class="fl code">
								<!-- <img src="img/erweima.png" alt=""> -->
								<div id="qrImage"></div>
								<div class="saosao">
									<p>请使用微信扫一扫</p>
									<p>扫描二维码支付</p>
								</div>
							</div>
							<div class="fl phone">

							</div>

						</div>
						<div class="clearfix"></div>
						<p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
					</div>
				</div>

			</div>

			<!-- 底部栏位 -->
			<!--页面底部，由js动态加载-->
			<div class="clearfix footer"></div>
			<script type="text/javascript">
				$(".footer").load("foot.html");
			</script>
			<!--页面底部END-->


			<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
			<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
			<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
			<script type="text/javascript" src="js/widget/nav.js"></script>
			<script type="text/javascript">
				$(function() {
					$("ul.payType li").click(function() {
						$(this).css("border", "2px solid #E4393C").siblings().css("border-color", "#ddd");
					})
				})
			</script>
		</div>

	</body>
	<script src="./js/vue/vue.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/common.js"></script>
	<script src="./js/qrcode.js"></script>

	<script type="text/javascript">
		var payVm = new Vue({
			el: "#payVm",
			data: {
				ly,
				orderId: 0, // 订单编号
			},
			created() {
				// 判断登录状态
				ly.http.get("/auth/verify").then(() => {
					// 获取订单编号
					this.orderId = ly.getUrlParam("orderId");
					const url = `http://api.chuangmei.com/api/order/order/alipay/${this.orderId}`
					 new QRCode(document.getElementById("qrImage"), {
					                text: url,
					                width: 250,
					                height: 250,
					                colorDark: "#000000",
					                colorLight: "#ffffff",
					                correctLevel: QRCode.CorrectLevel.H
					            });
				}).catch(() => {
					// 未登录，跳转至登录页
					location.href = "/login.html?returnUrl=" + location.href;
				})
			},
			components: {
				shortcut: () => import("./js/pages/shortcut.js")
			}
		});
	</script>
</html>
